<template>
    <qly-base-page :showNavBar="false" :title="navObj.title" padding="0" :showSafeArea="false">
        <view class="component" v-show="checkedItem === 'home'">
            <home ref="homeRef" v-if="componentLoaded.home"/>
        </view>
        <view class="component" v-show="checkedItem === 'calendar'">
            <calendar v-if="componentLoaded.calendar"/>
        </view>
        <view class="component" v-show="checkedItem === 'my'">
            <my v-if="componentLoaded.my"/>
        </view>
        <template #footer>
            <tr-tabbar :columnNum="columnNum">
                <tr-tabbar-item v-show="!item?.hidden" v-for="(item, index) in pageObjNew" :key="index"
                                :name="item.value" :text="item?.label" :icon="item.icon" :badge="item.badge">

                </tr-tabbar-item>
            </tr-tabbar>
        </template>
    </qly-base-page>
</template>
<script setup>

import trTabbar from '@/projects/trTabbar/index'
import trTabbarItem from '@/projects/trTabbar/item'
import Home from './home/index'
import Calendar from './calendar/index'
import My from './my/index'


const {checkedItem, setCheckedItem, show} = useStore('tabbar')


const pageObj = computed(() => {
    return {
        home: {
            value: 'home',
            label: $t("common.orderToday"),
            component: Home,
            icon: 'home',
            hidden:false
        },
        calendar: {
            value: 'calendar',
            label: $t("common.tourDate"),
            component: Calendar,
            icon: 'calendar',
            hidden:qly.role.driverRole()
        },
        my: {
            value: 'my',
            label: $t("common.my"),
            component: My,
            icon: 'account-fill',
            hidden:false
        },
    }
})
const pageObjNew = computed(() => {
    let data = {}
    for (const key in pageObj.value) {
        if (!pageObj.value[key].hide) {
            data[key] = pageObj.value[key]
        }
    }
    return data
})

const columnNum=computed(()=>{
    const list =Object.values(pageObj.value).filter(item=>!item.hidden)
    return list.length
})


const componentLoaded = ref({
    home: true
})

// 监听checkedItem变化
watch(() => checkedItem.value, newVal => {
    console.log('tabbaritemlll', newVal)
    uni.$emit('tabBar', newVal)
    componentLoaded.value[newVal] = true

}, {immediate: true})
const navObj = computed(() => {
    console.log('checkedItem.value',checkedItem.value)
    console.log('pageObj.value',pageObj.value)
    if (checkedItem.value && pageObj.value[checkedItem.value]) {
        return {
            title: pageObj.value[checkedItem.value].label,
            showNavbar: pageObj.value[checkedItem.value].showNavbar,
        }
    }
    return {title: '', showNavbar: true}
})
</script>
<style scoped lang="scss">
.component{
    height: 100%;
}
</style>
